<div style="position: relative;" class="commonTabsNgMainBox" [ngStyle]="mainTabBoxCssStyle|styleFilter">

  <div class="headRightTipLabel" *ngIf="headRightTipLabel" [ngStyle]="headRightTipLabelCssStyle|styleFilter">
    <img class="headRightTipIcon" *ngIf="headRightTipIcon" [src]="headRightTipIcon"
      onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1677037659179526a8b47136f7d4237bef6e79be87a51.png'"
      [ngStyle]="headRightTipIconCssStyle|styleFilter" />
    {{headRightTipLabel}}
  </div>
  <ng-container *ngIf="headTitle">
    <p class="topHeadTitle" *ngIf="headTitle" [ngStyle]="headTitleCssStyle|styleFilter">{{headTitle}}</p>
  </ng-container>

  <!--悬浮在顶部的DIV-->
  <div id="fixed{{ztabId}}" *ngIf="tagData.cssType!==5" class="commonTabsNgZorroBox"
    [ngStyle]="secondMainTabCssStyle|styleFilter" [ngClass]="{'secondMainTabPosition': secondMainTabPositionUnset}"
    style="z-index: 9999;">

    <!--2023.11.21 配置了才创建刷新事件-->
    <div id="{{tagData.data[0].partLink.params?.refreshEventName}}"
      *ngIf="tagData.data[0].partLink.params?.refreshEventName" class="refreshEventClassBox"></div>

    <div [ngStyle]="hidenTabCssStyle|styleFilter" class="defaultHidenTab">
      <!--左侧DIV布局-->
      <div id="hide{{ztabId}}" [ngStyle]="tabLeftBoxCssStyle|styleFilter" class="hideTab tabLeftBoxCssStyle1">

        <ng-container *ngFor="let item of tagData.data;let i=index;">
          <!--首页等普通的tab选项卡 hiddenTabCssType === 1 -->
          <ng-container *ngIf="item.partLink?.params?.hiddenTabCssType==='1'">
            <div class="normalTitle 1" id="{{itemTabId}}{{i}}"
              [ngStyle]="item.partLink?.params?.singleBoxCssStyle|styleFilter" appDebounceClick
              (debounceClick)="tabClick(i)">
              <ng-container *ngIf="i === index; else elseTemplate">
                <font class="tab-checked" [ngStyle]="item.partLink?.params?.checkedTitleCssStyle|styleFilter">
                  <img *ngIf="item.partLink?.params?.leftIcon" [src]="item.partLink?.params?.leftIcon"
                    onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1650868813213b8017b93f703e943dd6f5bd5f7198d91.png'"
                    [ngStyle]="item.partLink?.params?.leftIconCssStyle|styleFilter" class="starIcon" />
                  {{item.label}}
                  <img *ngIf="item.partLink?.params?.starIcon" [src]="item.partLink?.params?.starIcon"
                    onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1650868813213b8017b93f703e943dd6f5bd5f7198d91.png'"
                    [ngStyle]="item.partLink?.params?.starIconCssStyle|styleFilter" class="starIcon" />
                  <font *ngIf="item.partLink?.params?.subTitle"
                    [ngStyle]="item.partLink?.params?.checkSubTitleCssStyle|styleFilter">
                    {{item.partLink?.params?.subTitle}}</font>
                  <font *ngIf="item.partLink?.params?.subTitle2"
                    [ngStyle]="item.partLink?.params?.checkSubTitle2CssStyle|styleFilter">
                    {{item.partLink?.params?.subTitle2}}</font>
                </font>
                <div class="type-1-tab">
                  <div [ngStyle]="item.partLink?.params?.checkSlideCssStyle|styleFilter" class="slideBox checkFengwo">
                    <img class="slideIcon" *ngIf="item.partLink?.params?.checkSlideIcon"
                      [src]="item.partLink?.params?.checkSlideIcon"
                      onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1650870744403f3377e169addbe69affd909321f24d10.png'"
                      [ngStyle]="item.partLink?.params?.checkSlideIconCssStyle|styleFilter" />
                  </div>
                  <font class="type-1-font" *ngIf="item.partLink?.params?.subTitle"
                  [ngStyle]="item.partLink?.params?.checkSubTitleCssStyle|styleFilter"
                  >
                    {{item.partLink?.params?.subTitle}}
                  </font>
                </div>
              </ng-container>
              <ng-template #elseTemplate>
                <font [ngStyle]="item.partLink?.params?.normalTitleCssStyle|styleFilter" style="position: relative;">
                  <img *ngIf="item.partLink?.params?.leftIcon" [src]="item.partLink?.params?.leftIcon"
                    onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1650868813213b8017b93f703e943dd6f5bd5f7198d91.png'"
                    [ngStyle]="item.partLink?.params?.leftIconCssStyle|styleFilter" class="starIcon" />
                  {{item.label}}
                  <img *ngIf="item.partLink?.params?.starIcon" [src]="item.partLink?.params?.starIcon"
                    onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1650868813213b8017b93f703e943dd6f5bd5f7198d91.png'"
                    [ngStyle]="item.partLink?.params?.starIconCssStyle|styleFilter" class="starIcon" />
                  <font *ngIf="item.partLink?.params?.subTitle2"
                    [ngStyle]="item.partLink?.params?.normalSubTitle2CssStyle|styleFilter">
                    {{item.partLink?.params?.subTitle2}}</font>
                </font>
                <div class="type-1-tab">
                  <div [ngStyle]="item.partLink?.params?.normalSlideCssStyle|styleFilter" class="slideBox"></div>
                  <font class="type-1-font" *ngIf="item.partLink?.params?.subTitle"
                    [ngStyle]="item.partLink?.params?.normalSubTitleCssStyle|styleFilter">
                    {{item.partLink?.params?.subTitle}}
                  </font>
                </div>
              </ng-template>
            </div>
          </ng-container>
          <!--装饰装修的tab选项卡 hiddenTabCssType === 2 -->
          <ng-container *ngIf="item.partLink?.params?.hiddenTabCssType==='2'">
            <div class="normalTitle 2" [ngStyle]="item.partLink?.params?.singleBoxCssStyle|styleFilter" appDebounceClick
              (debounceClick)="tabClick(i)">
              <ng-container *ngIf="i === index; else elseTemplate">
                <font class="tab-checked" [ngStyle]="item.partLink?.params?.checkedTitleCssStyle|styleFilter">
                  {{item.label}}
                </font>
                <div [ngStyle]="item.partLink?.params?.checkSlideCssStyle|styleFilter" class="slideBox checkGreen">
                </div>
              </ng-container>
              <ng-template #elseTemplate>
                <font [ngStyle]="item.partLink?.params?.normalTitleCssStyle|styleFilter">
                  {{item.label}}
                </font>
                <div [ngStyle]="item.partLink?.params?.normalSlideCssStyle|styleFilter" class="slideBox"></div>
              </ng-template>
            </div>
          </ng-container>
          <!--直租直售新上好铺tab选项卡 hiddenTabCssType == 3 -->
          <ng-container *ngIf="item.partLink?.params?.hiddenTabCssType==='3'">
            <div [ngStyle]="item.partLink?.params?.hideTitleCssStyle|styleFilter" class="defaultTitle 3"
              appDebounceClick (debounceClick)="tabClick(i)" [ngClass]="{'tab-checked': i === index}">

              <ng-container *ngIf="isShowhidenSlideBox===false; else elseTemplate">

                <ng-container *ngIf="i === index">
                  <font [ngStyle]="item.partLink?.params?.unSlideCheckCssStyle|styleFilter"
                    class="isShowhidenSlideBoxfalse1">{{item.label}}</font>
                </ng-container>
                <ng-container *ngIf="i !== index">
                  <font [ngStyle]="item.partLink?.params?.unSlideNormalCssStyle|styleFilter"
                    class="isShowhidenSlideBoxfalse2">{{item.label}}</font>
                </ng-container>


                <div [ngClass]="{'checkWhite': i === index}" class="slideBox"></div>
              </ng-container>

              <ng-template #elseTemplate>
                <ng-container *ngIf="i === index">
                  <font [ngStyle]="item.partLink?.params?.slideCheckCssStyle|styleFilter"
                    class="isShowhidenSlideBoxfalse3">{{item.label}}</font>
                </ng-container>
                <ng-container *ngIf="i !== index">
                  <font [ngStyle]="item.partLink?.params?.slideNormalCssStyle|styleFilter"
                    class="isShowhidenSlideBoxfalse4">{{item.label}}</font>
                </ng-container>
                <div [ngClass]="{'checkFengwo': i === index}" class="slideBox"></div>
              </ng-template>


            </div>
          </ng-container>
          <!--2023-05-11配置了空的tab用于异步刷新-->
          <ng-container *ngIf="item.partLink===undefined&&item.link===undefined">
            <div class="emptytab" appDebounceClick (debounceClick)="tabClick(i)"></div>
          </ng-container>



        </ng-container>





      </div>
      <!--带筛选的按钮-->
      <ng-container *ngFor="let item of tagData.data;let i=index;">
        <div *ngIf="item?.link" class="defaultFilter" appDebounceClick (debounceClick)="openModal(item.link)"
          [ngStyle]="item.link.params.filterBoxCssStyle|styleFilter">
          <ng-container *ngIf="item.link.params.filterIcon; else elseTemplate">
            <img src="{{item.link.params.filterIcon}}" [ngStyle]="item.link.params.filterIconCssStyle|styleFilter"
              class="segment-img-link">
            <font *ngIf="item.link.params.filterIconLabel" class="filterIconLabel"
              [ngStyle]="item.link.params.filterIconLabelCssStyle|styleFilter">{{item.link.params.filterIconLabel}}
            </font>
          </ng-container>
          <ng-template #elseTemplate>
            筛选<img src="assets/fw/order.png" class="segment-img-link"
              [ngStyle]="item.link.params.filterIconCssStyle|styleFilter">
          </ng-template>
        </div>



      </ng-container>
    </div>

    <!--不可滑动区域-->
    <ng-container *ngIf="currentFixedTagArray[this.index]">
      <!--class="1"-->
      <app-common-nested-tag class="1" [currentDataArray]="currentFixedTagArray[this.index]">
      </app-common-nested-tag>
    </ng-container>
  </div>

  <!-- *ngIf="isShowHideTab" -->
  <Tabs [page]="tabPageShowCount" [ngClass]="{
      'tabs-box-noShadow': tagData.cssType&&tagData.cssType===3||tagData.cssType&&tagData.cssType===4,
      'tabs-box-white': tagData.cssType&&tagData.cssType===5,
      'tabs-box-white2': tagData.cssType&&tagData.cssType===6,
      'tabs-box':(tagData.cssType===undefined||tagData.cssType!==3||tagData.cssType!==4)
    }" [swipeable]="false" [animated]="true" [useOnPan]="false" [tabBarBackgroundColor]="tabBarBackGroundColor"
    [activeTab]="index" [tabTitleSize]="tabTitleSize" [tabBarUnderlineStyle]="tabBarUnderlineStyle"
    [tabBarActiveTextColor]="'#252629'" [tabBarTextStyle]="tabBarTextStyle" (onTabClick)="onChange($event)"
    [prerenderingSiblingsNumber]="tabPageShowCount" [ngStyle]="tabsBackGroundColor|styleFilter">

    <TabPane [title]="titleTemplate" *ngFor="let item of tagData.data;let i=index;">
      <ng-template #titleTemplate>
        <ng-container *ngIf="tagData.cssType&&tagData.cssType===1">
          <div id="tab{{ztabId}}{{i}}">{{item.label}}</div>
        </ng-container>
        <ng-container *ngIf="tagData.cssType&&tagData.cssType===2">
          <div id="tab{{ztabId}}{{i}}">
            <p>{{item.label}}</p>
          </div>
        </ng-container>
        <ng-container *ngIf="tagData.cssType&&tagData.cssType===3">
          <div [ngClass]="{'tab-checked': i === index}" id="tab{{ztabId}}{{i}}"
            [ngStyle]="item.partLink?.params?.normalTitleCssStyle|styleFilter" class="defaultTitle2">
            <div *ngIf="isShowCustomCssType3Slide" [ngClass]="{'checkOrange': i === index}" class="slideBox3"></div>
            <div *ngIf="!isShowCustomCssType3Slide&&isShowCssType3Slide" class="slideBox"></div>
          </div>
        </ng-container>
        <ng-container *ngIf="tagData.cssType&&tagData.cssType===4">
          <div class="cssTyp4box" id="tab{{ztabId}}{{i}}">
            <!-- 
            <ng-container
              *ngIf="!item.partLink?.params?.checkClass && item.partLink?.params?.selectedCssStyle && i === index; else elseTemplate">
              {{item.label}}
              <div class="slideBox4" [ngStyle]="item.partLink?.params?.selectedSlideCssStyle|styleFilter"></div>
            </ng-container>
            <ng-template #elseTemplate>
              <div [ngClass]="{'tab-checked': i === index}">{{item.label}}</div>
              <div class="slideBox4"></div>
            </ng-template>
            -->
          </div>
        </ng-container>
        <ng-container *ngIf="tagData.cssType&&tagData.cssType===5">

          <div *ngIf="i === index" [ngStyle]="item.partLink?.params?.checkedTitleCssStyle| styleFilter"
            id="tab{{ztabId}}{{i}}">
            {{item.label}}
          </div>

          <div *ngIf="i !== index" [ngStyle]="item.partLink?.params?.normalTitleCssStyle | styleFilter"
            id="tab{{ztabId}}{{i}}">
            {{item.label}}
          </div>

        </ng-container>
        <ng-container *ngIf="tagData.cssType&&tagData.cssType===6">
          <div [ngClass]="{'tab-checked2': i === index}" id="tab{{ztabId}}{{i}}"></div>
          <!-- <div [ngClass]="{'tab-checked2': i === index}" class="defaultTitle6" id="tab{{ztabId}}{{i}}"> -->
          <!-- [ngStyle]="item.partLink?.params?.normalTitleCssStyle|styleFilter" -->
          <!-- {{item.label}} -->
          <!-- 绿色checkClass不为空-->
          <!-- <ng-container *ngIf="item.partLink?.params?.checkClass">
            </ng-container>
            <ng-container
              *ngIf="!item.partLink?.params?.checkClass && item.partLink?.params?.selectedCssStyle && i === index; else elseTemplate">              
            </ng-container>
            <ng-template #elseTemplate>
            </ng-template> -->
          <!-- </div> -->
        </ng-container>
        <ng-container *ngIf="tagData.cssType&&tagData.cssType===7">
          <div [ngClass]="{'tab-checked2': i === index}" id="tab{{ztabId}}{{i}}"></div>
        </ng-container>
      </ng-template>
      <!-- ion-content -->
      <div id="{{ztabId}}{{i}}" class="commonNgZorroTab{{i}}"
        [ngClass]="{'cssType3TabPane':tagData.cssType===3,'cssType4TabPane':tagData.cssType===4}"
        [ngStyle]="item.partLink?.params?.tabBoxCssStyle|styleFilter">
        <div class="custombgPaneInMainDiv" *ngIf="item.partLink?.params?.custombgPaneInMainDiv"
          [ngStyle]="item.partLink?.params?.custombgPaneInMainDivCssStyle|styleFilter">
        </div>
        <ion-content *ngIf="(tagData.cssType&&tagData.cssType===4)||(tagData.cssType&&tagData.cssType===5)"
          [ngClass]="{'cssType5IonContent':tagData.cssType===5}"
          [ngStyle]="item.partLink?.params?.ionContentCssStyle|styleFilter">
          <div [ngStyle]="item.partLink?.params?.tabBoxBgCssStyle|styleFilter">
            <ng-container *ngIf="this.index===i">
              <div *ngIf="isSpinning" class="loading-box">
                <ion-spinner></ion-spinner>
              </div>
              <ng-container *ngIf="!isSpinning">
                <app-common-nested-tag class="2" [currentDataArray]="currentDataArray[i]">
                </app-common-nested-tag>
              </ng-container>
            </ng-container>
          </div>
        </ion-content>
        <ng-container
          *ngIf="tagData.cssType===undefined || (tagData.cssType!==undefined&&tagData.cssType!==4&&tagData.cssType!==5)">
          <ng-container *ngIf="item.partLink?.params?.viewInContent; else cssTypeIsNot4Tempalte">
            <ion-content>
              <div [ngStyle]="item.partLink?.params?.tabBoxBg1CssStyle|styleFilter">
                <ng-container *ngIf="this.index===i">
                  <div *ngIf="isSpinning" class="loading-box">
                    <ion-spinner></ion-spinner>
                  </div>
                  <ng-container *ngIf="!isSpinning">
                    <app-common-nested-tag class="3" [currentDataArray]="currentDataArray[i]">
                    </app-common-nested-tag>
                  </ng-container>
                </ng-container>
              </div>
            </ion-content>
          </ng-container>
          <ng-template #cssTypeIsNot4Tempalte>
            <ng-container *ngIf="this.index===i">
              <div *ngIf="isSpinning" class="loading-box">
                <ion-spinner></ion-spinner>
              </div>
              <ng-container *ngIf="!isSpinning">
                <app-common-nested-tag class="4" [currentDataArray]="currentDataArray[i]">
                </app-common-nested-tag>
              </ng-container>
            </ng-container>
          </ng-template>
        </ng-container>
      </div>
      <input type="hidden" class="hideCssStyleValue{{i}}" id="hideCssStyleValue{{i}}"
        value="{{item.partLink?.params?.hidenStyle}}">

    </TabPane>
  </Tabs>
</div>